<!DOCTYPE html style="height:100%" >

<head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      
      <title>Google Maps Stresstest</title>
      
      <!-- JQuery -->
      <script type="text/javascript" 
	  		  src="js/jquery-1.6.4.js">
      </script>
     
      <!-- Google Maps API -->
      <script type="text/javascript" 
	 		  src="http://maps.google.com/maps/api/js?v=3.5&sensor=false">
      </script>  
      
      <script type="text/javascript">
    
        // Vordefinierte Startposition der Karte
        var geo_home = new google.maps.LatLng(25,60);
        
        // Karte initialisieren
        var map = null;
        
        // Array zum speichern aller Marker
        var gmarkers = [];
        
        // Initialisierung der Kartendarstellung
        function load(count) {
            map = new google.maps.Map(document.getElementById("map"), {
            mapTypeId: 'terrain',
            navigationControl: false,
            mapTypeControl: false,
            scaleControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });
          
          // Variable zum zählen der Marker
          var counter = 0;
    
          // Marker aus der Datenbank laden
          downloadUrl("getMarkers.php", function(data) {
              
			// XML Interpretieren
            var xml = parseXml(data);
            var markers = xml.documentElement.getElementsByTagName("marker");
            
            // Schleife die die einzelnen Marker auf der Karte setzt
            for (var i = 0; i < count; i++) {
          
		  		// Point Objekt mit Koordinaten des
				// Markers erstellen
                var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng"))
				);
               
			    // Marker auf der Karte platzieren
                var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                });
                
				// Der nächste Marker
                counter++;
            }
			
			// Statusinformation ausgeben
            document.getElementById("informationPanel").innerHTML = "Aktuell werden auf der Karte " 
                                                                     + count + " Marker dargestellt";
            
			// Karte ausrichten
            map.setCenter(geo_home);
            map.setZoom(3);
            
          });
        }
    
		// Funktion die externe Skripte aufruft
		// (Laden der Marker)
        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
    
		  // Wenn sich readystate ändert....
          request.onreadystatechange = function() {
            
			// Marker noch nicht geladen --> Ladebildschirm
			if(request.readyState == 0) {
				$("#container").fadeIn(250);
			}
			
			// Laden abgeschlossen --> Ladebildschirm ausblenden
			if (request.readyState == 4) {
              callback(request.responseText, request.status);
			  fadeOut();
            }
          };
    
		  // AJAX-Request senden
          request.open('GET', url, true);
          request.send(null);
        }
    
		// XML parsen
        function parseXml(str) {
          if (window.ActiveXObject) {
            var doc = new ActiveXObject('Microsoft.XMLDOM');
            doc.loadXML(str);
            return doc;
          } 
		  else if (window.DOMParser) {
            return (new DOMParser).parseFromString(str, 'text/xml');
          }
        }
		
		// Objekte ausblenden
		function fadeOut(){
				$("#container").fadeOut(1000);
		}
		
      </script>
      
      <link href="css/stress.css" 
      		rel="stylesheet" 
            type="text/css">
      
</head>

<body style="height:100%" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" 
onload="load('<?php echo $_GET['count']; ?>');">
        
        <!-- Ladeanzeige -->
        <div id="container" class="outer">
		<br /><br /><br />
    	<center><img src="load.gif" width="31" height="31" /></center>
		</div> 
      
        <!-- Kartenfenster -->
        <div id="map" style="width:100%; height:100%;">
        
        </div>
        
        <!-- Fenster zur Ausgabe von Informationen -->
        <div id="informationPanel" class="informationPanel">
        
        </div>
    
</body>
  
</html>